<template>
	<!-- 个人信息页面 -->
	<view class="content">
		<view class="top">
			<view class="getwx">读取微信资料</view>
		</view>
		<view class="label">
			<view class="label_left">
				头像
			</view>
			<view class="label_right">
				<image src="http://wx.crh2009.com/addons/ewei_shopv2/static/images/noface.png"
				class="tou_img" mode="widthFix"></image>
				<image src="../../static/rightimg.png" mode="widthFix" class="btimg"></image>
			</view>
		</view>
		
		<view class="label label2">
			<view class="label_left">
				修改昵称
				<view class="smstart">*</view>
			</view>
			<view class="label_right">
				<input type="text" placeholder="请输入昵称" class="input_as" value="白芷" adjust-position="false"/>
			</view>
		</view>
		
		<view class="label label2">
			<view class="label_left">
				手机号
				<view class="smstart">*</view>
			</view>
			<view class="label_right" style="justify-content: flex-start;">
				<input type="tel" placeholder="请输入手机号" class="input_as" value="213213213123" style="width:80%;" adjust-position="false"/>
				<view style="white-space: nowrap;color:#666;" @tap="nacloa()">更换绑定</view>
				<view class="label2_right_sm">
					<image src="../../static/rightimg.png" mode="widthFix" class="btimg" @tap="nacloa()"></image>
				</view>
			</view>
		</view>
		
		<view class="label label2">
			<view class="label_left">
				姓名
				<view class="smstart">*</view>
			</view>
			<view class="label_right">
				<input type="text" placeholder="请输入姓名" class="input_as" value="白芷" adjust-position="false"/>
			</view>
		</view>
		<view class="label label2" style="margin-top:0;    border-top: 1px solid #ebebeb;">
			<view class="label_left">
				微信号
				<view class="smstart">*</view>
			</view>
			<view class="label_right">
				<input type="text" placeholder="请输入微信号" class="input_as" value="Fm2184121" adjust-position="false"/>
			</view>
		</view>
		<view class="label label2" style="margin-top:0;    border-top: 1px solid #ebebeb;">
			<view class="label_left">
				出生日期
				<view class="smstart">*</view>
			</view>
		<view class="label_right" style="justify-content: flex-start;">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" style="width:100%;">
			    <input type="text" placeholder="请选择出生日期" class="input_as"  style="width:93%;" disabled :value="date"/>
			</picker>
			<view class="label2_right_sm">
				<image src="../../static/btimg.png" mode="widthFix" class="btimg"></image>
			</view>
		</view>
		</view>
		<view class="label label2" style="margin-top:0;    border-top: 1px solid #ebebeb;">
			<view class="label_left">
				所在城市
				<view class="smstart">*</view>
			</view>
			<view class="label_right">
				<input type="text" class="input_as" placeholder="请选择省市区"  :value="address" disabled="disabled" adjust-position="false" @click="addressShow = true"/>
			</view>
		</view>
		
		<!-- 地址组件 -->
		<pickerAddress v-model="addressShow" @confirm="addresspick" />
			
		 
		<view class="bao_btn">确认修改</view>
		<!-- 侧边栏 -->
		<!-- <fixce></fixce> -->
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
    import pickerAddress from '../../component/address/index.vue'; //地址组件
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce,
		pickerAddress
		},
		data (){
			    const currentDate = this.getDate({
			            format: true
			        })
			return{
				 date:currentDate, //出生日期	
				 topState:false,
				 addressShow: false,
				    form: {   //地址
				                     province: '',
				                     city: '',
				                     area: '',
				                 },
				                 address: ''
			}
		},
		    computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			   bindDateChange: function(e) {
			            this.date = e.target.value
			        },
					    getDate(type) {
					            const date = new Date();
					            let year = date.getFullYear();
					            let month = date.getMonth() + 1;
					            let day = date.getDate();
					
					            if (type === 'start') {
					                year = year - 60;
					            } else if (type === 'end') {
					                year = year + 2;
					            }
					            month = month > 9 ? month : '0' + month;;
					            day = day > 9 ? day : '0' + day;
					            return `${year}-${month}-${day}`;
					        },
			addresspick(obj) {
			            let arr = [ 'province', 'city', 'area'];
			            let place = '';
			            arr.map(key => {
			                this.form[key] = obj[key].AreaId
			                place += obj[key].AreaName
			            })
			            this.address = place
			        },
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			nacloa (){
				uni.navigateTo({
					url:'./bind'
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
		overflow-x: hidden;
	}
	.top{
		padding:20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width:90%;
		margin:0 auto;
	}
	.getwx{
		 color: #ff80c0;
		 text-decoration: underline;
		 font-size:30rpx;
	}
	.label{
		width:95%;
		padding:25rpx 3%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.label_left{
		display: flex;
		justify-content:flex-start;
		align-items: center;
		color:#666;
		font-size:28rpx;
	}
	.label_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.tou_img{
		border-radius: 100rpx;
		width:100rpx;	
	}
	.btimg{
		width:30rpx;
		margin-left:5rpx;
	}
	.label2{
		margin-top:20rpx;
	}
	.label2 .label_left{
		width:20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.smstart{
		color:red;
		font-size:30rpx;
	}
	.label2 .label_right{
		width:80%;
	}
	.input_as{
		display: inline-block;
		width:100%;
		color:#000;
		text-indent: 20rpx;
	}
	.label2_right_sm{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#666;
	}
	.uni-input-input{
		font-size: 30rpx!important;
	}
	.bao_btn{
		    background: #ff80c0;
		    color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width:90%;
			height:80rpx;
			margin:50rpx auto 0;
			font-size:30rpx;
	}
</style>
